<template>
  <div class="">
    <h1>2.watch监听器</h1>
    <h3>
      watch可以监听data的变化，还可以监听路由的变化，如果data变化了，就会触发这个监听器，并且得到新的值和旧的值
    </h3>
    <button @click="msg = '五一过完了，过的太快了'">change msg</button>
    <h5>{{ msg }}</h5>

    <button @click="obj.name = '小红'">改变obj的name</button>
    <h5>{{ obj.name }}</h5>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "vuevuevue",
      obj: {
        name: "小明",
      },
    };
  },
  mounted() {},
  methods: {},
  watch: {
    msg: {
      handler(newValue, oldValue) {
        console.log(newValue, oldValue);
      },
      //执行函数的意思，只要msg变化就会触发这个执行函数，执行函数中自带参数是新值和旧值
      immediate: true, //是立刻马上的意思，代表是否一进入页面就执行一次监听函数，默认的是false
    },
    obj: {
      handler(newValue, oldValue) {
        console.log(newValue);
      },
      deep: true, //是否深度监听，如果要监听的是一个对象，想要监听对象内部的变化的时候就需要 deep设置为true，默认的是false
    },

    //一个监听器 handler是必须要写的 但是immeditate和deep是根据情况决定写不写，默认值都是false，所以watch可以简写为一个函数，这个函数代表的就是handler执行函数
    // msg(newValue, oldValue) {},
  },
};
</script>

<style lang="scss"></style>
